<template>
	<div class="card">
		<el-button type="primary" @click="bindPrint">打印</el-button>
		<div id="printContent">
			<!-- 需要打印的内容 -->
			123
		</div>
	</div>
</template>

<script lang="ts" setup>
import printJS from "print-js"

const bindPrint = () => {
	// printJS({
	// 	printable: "#printTable",
	// 	type: "html"
	// 	// header: null,
	// 	// targetStyles: ["*"],
	// 	// style: "@page {margin:0 10mm}"
	// })
	printJS({
		printable: [
			{ date: "2008-08-08", name: "赛丽亚", intensify: "429" },
			{ date: "2012-12-12", name: "派蒙", intensify: "648" }
		],
		properties: [
			//表头
			{ field: "date", displayName: "日期" },
			{ field: "name", displayName: "姓名" },
			{ field: "intensify", displayName: "变强" }
		],
		type: "json",
		header: "人员名单",
		headerStyle: "text-align: center;font-weight: bold;",
		documentTitle: "",
		gridHeaderStyle: "border: 1px solid #000;text-align:center",
		gridStyle: "border: 1px solid #000;text-align:center",
		repeatTableHeader: true
	})
}
</script>

<style lang="less" scoped>
.card {
	padding: 15px 20px;
	background-color: #fff;
}
</style>
